import React, { Component } from 'react';
import { get } from 'utils/http'
import { SearchWrap } from './styledIndex'
import search from 'assets/images/search.png'
import cancle from 'assets/images/cancle.png'
import notfound from 'assets/images/notfound.png'
import BScroll from 'better-scroll'

class Search extends Component {
    constructor(props) {
        super(props);
        // this.handleClick = this.handleClick.bind(this)
        this.keyUp = this.keyUp.bind(this)
        this.cancleClick = this.cancleClick.bind(this)
        this.state = {
            searchList: [],
            hotWord: [],
            Bscroll: '',
            username: ''
        }
    }

    inputChange = (e) => {
        this.setState({ 
            username: e.target.value
        })
    }

    cancleClick() {
        this.props.history.push('/index')
    }

    keyUp = async (e) => {
        if(e.keyCode === 13) {
            var result = await get({
                url: `/api/Show/Search/getShowList?keywords=${this.state.username}&page=1&sort_type=1&version=6.0.9&referer=2`
            })
            this.setState({
                searchList: result.data.list
            })
        }
    }
    
    async componentDidMount() {

        let words = await get({
            url: '/api/Show/Search/getHotWord?version=6.0.9&referer=2'
        })

        const wrapper = document.querySelector('.wrapper')
        let scroll = new BScroll(wrapper, {
            scrollX: false,
            click: true,
            scrollY: true,
        })
        
        this.setState({
            hotWord: words.data,
            Bscroll: scroll
        })
    }

    render() {
        let findResult;
        if(this.state.searchList.length) {
            findResult = (
                this.state.searchList.map( (value,index) => (
                    <div key={index} className="hhh">
                        <img src={value.pic} alt=""/>
                        <div className="jjj">
                            <div>{value.start_show_time.substring(0,4)}&nbsp;{value.show_time_top}&nbsp;{value.show_time_bottom}</div>
                            <div>{value.name.replace(/<([a-zA-Z1-6]+)(\s*[^>]*)?>/g, "<$1>").replace(/<span>([^<]*?)<\/span>/gi, '$1')}</div>
                            <div>{value.city_name}&nbsp;|&nbsp;{value.venue_name}</div>
                            <div>
                                {
                                    value.support_desc.length && (
                                        value.support_desc.map((item,index) => (
                                            <span key={index}>{item}</span>
                                        ))
                                    )
                                }
                            </div>
                            <div>￥{value.min_price}&nbsp;<span>起</span></div>
                        </div>
                    </div>
                ) )
            )
        } else {
            findResult = (
                <div className="notfound">
                    <img src={notfound} alt=""/>
                    <p>未找到相关内容</p>
                </div>
            )
        }
        return (
            <SearchWrap>
                <header>
                    <div>
                        <span><img src={search} alt=""/></span>
                        <input type="search" placeholder="搜索热门演出" className="text" onChange={(e) => this.inputChange(e)} onKeyUp={(e) => this.keyUp(e)}/>
                        <span><img src={cancle} alt="" /></span>
                    </div>
                    <span className="cancle" onClick={this.cancleClick}>取消</span>
                </header>
                <div className="wrapper">
                    <div className="content">
                        {findResult}
                        <div className="default-wrap">
                            <h3 className="title">热门搜索</h3>
                            <ul>
                            {
                                this.state.hotWord.map((value,index) => (
                                    <li key={index} onClick={this.handleClick}>{value}</li>
                                ))
                            }
                            </ul>
                        </div>
                    </div>
                </div>
            </SearchWrap>
        );
    }
}
export default Search;